<template>
  <view class="container">
    <!-- 情感状态指示器 -->
    <view class="emotion-indicator">
      <view class="emotion-circle" :style="indicatorStyle">{{ latestEmotion.label }}</view>
      <view class="emotion-scale">祝你每天都有好心情</view>
    </view>

    <!-- 情感波动图表 -->
    <view class="chart-container">
      <canvas canvas-id="emotionChart" class="chart"></canvas>
    </view>

    <!-- 关键词云 -->
    <view class="wordcloud-container">
      <canvas canvas-id="wordCloud" class="wordcloud"></canvas>
    </view>

    <!-- 情感摘要 -->
    <view class="emotion-summary">
      <h2>情感分析摘要</h2>
      <p>当前情感状态为: {{ latestEmotion.label }}</p>
      <p>过去几天情感波动较大，请注意调整学习节奏与心理状态。</p>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dialogs: [
        { emotion_score: 0.8, content: "今天考试顺利", created_at: "2025-03-01" },
        { emotion_score: -0.2, content: "遇到一些麻烦，复习进度慢", created_at: "2025-03-02" },
        { emotion_score: 0.5, content: "问题解决了，心情好多了", created_at: "2025-03-04" },
        { emotion_score: 0.3, content: "感觉考研压力大", created_at: "2025-03-05" },
        { emotion_score: 0.6, content: "有进步", created_at: "2025-03-07" }
      ],
      keywords: [
        { text: "复习", weight: 8 },
        { text: "考试", weight: 1 },
        { text: "进步", weight: 5 },
		{ text: "午饭吃啥？", weight: 5 },	
		{ text: "要上岸！", weight: 10 }
      ]
    };
  },
  computed: {
    latestEmotion() {
      const score = this.dialogs.slice(-1)[0]?.emotion_score || 0;
      return {
        label: score > 0.3 ? "快乐" : score < -0.3 ? "悲伤" : "中立",
        score: score,
        color: score > 0.3 ? `rgba(46, 204, 113, ${Math.abs(score)})` : 
               score < -0.3 ? `rgba(231, 76, 60, ${Math.abs(score)})` : 
               `rgba(241, 196, 15, ${Math.abs(score)})`
      };
    },
    indicatorStyle() {
      return {
        backgroundColor: this.latestEmotion.color,
        boxShadow: `0 0 15px ${this.latestEmotion.color}`
      };
    }
  },
  mounted() {
    this.drawChart();
    this.drawWordCloud();
  },
  methods: {
    drawChart() {
      const ctx = uni.createCanvasContext('emotionChart', this);
      const { width, height } = { width:370, height: 300 };
      
      // 绘制坐标轴
      ctx.setStrokeStyle("#3498db");
      ctx.beginPath();
      ctx.moveTo(30, 20);
      ctx.lineTo(30, height - 30);
      ctx.lineTo(width - 20, height - 30);
      ctx.stroke();

      // 绘制数据点
      this.dialogs.forEach((dialog, index) => {
        const x = 30 + (index * (width - 50) / (this.dialogs.length - 1));
        const y = height - 30 - (dialog.emotion_score + 1) * (height - 60) / 2;
        
        ctx.setFillStyle(this.getColor(dialog.emotion_score));
        ctx.beginPath();
        ctx.arc(x, y, 8, 0, 2 * Math.PI);
        ctx.fill();

        // 添加内容和时间标记
        ctx.setFillStyle('#555');
        ctx.setFontSize(12);
        ctx.fillText(`${dialog.content}`, x - 30, y - 10);
        ctx.fillText(`${dialog.created_at}`, x - 30, height - 15);
      });

      ctx.draw();
    },

    drawWordCloud() {
      const ctx = uni.createCanvasContext('wordCloud', this);
      const centerX = 190, centerY = 200;
      
      this.keywords.forEach((word, index) => {
        ctx.setFontSize(10 + word.weight * 2);
        ctx.setFillStyle(`rgba(52, 152, 219, ${0.3 + word.weight/10})`);
        
        // 简单环形布局
        const angle = (index * 72) * Math.PI / 180;
        const radius = word.weight * 8 + 30; // 适当增加半径
        ctx.fillText(
          word.text,
          centerX + Math.cos(angle) * radius,
          centerY + Math.sin(angle) * radius
        );
      });

      ctx.draw();
    },

    getColor(score) {
      return score > 0 ? 
        `rgba(52, 152, 219, ${0.3 + score})` : 
        `rgba(231, 76, 60, ${0.3 + Math.abs(score)})`;
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f0f9ff; /* 背景颜色 */
  height: 100%;
  width: 100%;
}

.emotion-indicator {
  background-color: #e6f7ff; /* 指示器背景 */
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(52, 152, 219, 0.1);
}

.emotion-circle {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  transition: all 0.3s;
  font-size: 24rpx;
}

.emotion-scale {
  margin-left: 40rpx;
  color: #2c3e50;
  font-size: 40rpx;
}
.chart-container, .wordcloud-container {
  background: white;
  border-radius: 16rpx;
  margin-top: 5rpx;
  margin-left:5rpx;
  box-shadow: 0 4rpx 12rpx rgba(52, 152, 219, 0.1);
}

.chart {
  width: 380px;
  height: 300px;
}

.wordcloud {
  width: 380px;
  height: 250px;
}

.emotion-summary {
  padding: 20rpx;
  background-color: #e6f9ff; /* 摘要区域背景 */
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(52, 152, 219, 0.1);
  margin-top: 30rpx;
  margin-right:60rpx
}
</style>
